import { useMemo, useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import CustomTabBar from './components/tabbars/tabbar'
import GlobalReminderDisplay from './components/GlobalReminderDisplay'
import { reminderService } from './utils/reminderService'
// import PageTransition from './components/transitions/PageTransition'
// import './components/tabbars/index.css'

export default function App() {
  const location = useLocation()
  const navigate = useNavigate()

  // 根据当前路径计算激活的 tab，例如 /index/home -> home
  const activeTab = useMemo(() => {
    const match = location.pathname.match(/^\/index\/(\w+)/)
    return match?.[1] ?? 'home'
  }, [location.pathname])

  const handleTabChange = (tab: string) => {
    if (tab !== activeTab) {
      navigate(`/index/${tab}`)
    }
  }

  // 初始化全局提醒服务
  useEffect(() => {
    reminderService.init();
    
    // 组件卸载时清理服务
    return () => {
      reminderService.destroy();
    };
  }, []);

  return (
    <div>
      {/* <PageTransition locationKey={location.pathname} duration={0.5}> */}
        <Outlet />
      {/* </PageTransition> */}
      <div className="app-with-tabbar">
        <CustomTabBar activeTab={activeTab} onTabChange={handleTabChange} />
      </div>
      {/* 全局提醒显示组件 */}
      <GlobalReminderDisplay />
    </div>

  )
}